<template>
  <view class="view-class">
    <u-navbar back-text="返回" title="入住申请"></u-navbar>
    <view class="view-box">
      <u-form :model="form" ref="uForm" label-width="140" label-align="center">
        <u-form-item required label="房间号" prop="roomNo"><u-input disabled v-model="form.roomNo" /></u-form-item>
        <u-form-item required label="床位号" prop="bedNo"><u-input disabled v-model="form.bedNo" /></u-form-item>
        <u-form-item required label="姓名" prop="name"><u-input v-model="form.name" :disabled="(isCRM && form.name!=null)" /></u-form-item>
        <u-form-item required label="性别" prop="sex">
          <u-radio-group v-model="form.sex" :disabled="(isCRM && form.sex!=null)">
            <u-radio
              v-for="(item, index) in sexList" :key="item.name"
              :name="item.value"
              :disabled="item.disabled"
            >
              {{item.name}}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item required label="ID" v-if="form.riderId"><u-input v-model="form.riderId" disabled/></u-form-item>
        <u-form-item required label-width="130" label="部门/站点" v-if="isCRM" prop="deptName">
          <u-input v-model="form.deptName" type="select" :disabled="isCRM && form.deptName!=null" />
        </u-form-item>
        <u-form-item required label="身份证号" prop="idCardNo"><u-input v-model="form.idCardNo" :disabled="isCRM && form.idCardNo!=null"/></u-form-item>
        <u-form-item required label="联系电话" prop="phoneNumber"><u-input v-model="form.phoneNumber" :disabled="isCRM && form.phoneNumber!=null"/></u-form-item>
        <u-form-item required label="押金(元)" prop="deposit"><u-input disabled v-model="form.deposit" /></u-form-item>
        <u-form-item required label="租金(元/日)" prop="rent"><u-input disabled v-model="form.rent" /></u-form-item>
        <u-form-item required label="支付方式" prop="paymentMethod">
          <u-radio-group v-model="form.paymentMethod"  >
            <u-radio
              v-for="(item, index) in paymentMethodOption" :key="item.name"
              :name="item.value"
              :disabled="item.disabled"
              v-if="isCRM == 1 || (isCRM == 0 && item.value==1)"
            >
              {{item.name}}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item required label="入住日期" prop="checkInTime"   >
          <u-input v-model="form.checkInTime" type="select" @click="checkOutTimeFunc2"/>
        </u-form-item>
        <u-form-item required label="离宿日期" prop="checkOutTime"  v-if="form.paymentMethod == 1" >
          <u-input v-model="form.checkOutTime" type="select" @click="checkOutTimeFunc"/>
        </u-form-item>
        <u-form-item required label="人脸照片" prop="avatarImages">
          <view v-show="showavatarImages" class="preview-wrapper">
            <u-icon style="position: absolute;top:4px;right: 4px;z-index: 1;" class="preview-del-icon"
                    name="close-circle-fill" color="#FA3534" size="52"
                    @click="onHandIdCardImgDelete"/>
            <u-image class="pre-item-image" :src="jointUrl(form.avatarImages)" width="160"
                     height="160"
                     mode="aspectFill"/>
          </view>
          <u-upload v-show="!showavatarImages"  width="160" height="160" :auto-upload="false" max-count="1"
                     @on-choose-complete="onHandIdCardChooseCallback" ref="handIdCardUpload" :disabled="isCRM && form.avatarImages!=null"></u-upload>
        </u-form-item>
        <u-form-item required  label="身份证人像面照片" prop="idCardBadgeImages" v-if="!isCRM" >
          <view v-show="showIdCardBadgeImages" class="preview-wrapper">
            <u-icon style="position: absolute;top:4px;right: 4px;z-index: 1;" class="preview-del-icon"
                    name="close-circle-fill" color="#FA3534" size="52"
                    @click="onIdCardBadgeImgDelete"/>
            <u-image class="pre-item-image" :src="jointUrl(form.idCardBadgeImages)"
                     width="160" height="160"
                     mode="aspectFill"/>
          </view>
          <u-upload v-show="!showIdCardBadgeImages" width="160" height="160" :auto-upload="false" max-count="1"
                    @on-choose-complete="onIdCardBadgeImgCallback" ref="handIdCardBadgeImgUpload" :disabled="!isCRM && form.idCardBadgeImages!=null"></u-upload>
        </u-form-item>

        <u-form-item required  label="身份证国徽面照片" prop="idCardPortraitImages" v-if="!isCRM" >
          <view v-show="showIdCardPortraitImgPreview" class="preview-wrapper">
            <u-icon style="position: absolute;top:4px;right: 4px;z-index: 1;" class="preview-del-icon"
                    name="close-circle-fill" color="#FA3534" size="52"
                    @click="onIdCardPortraitImgDelete"/>
            <u-image class="pre-item-image" :src="jointUrl(form.idCardPortraitImages)"
                     width="160" height="160"
                     mode="aspectFill"/>
          </view>
          <u-upload v-show="!showIdCardPortraitImgPreview" width="160" height="160" :auto-upload="false" max-count="1"
                    @on-choose-complete="onIdCardPortraitImgCallback" ref="handIdCardPortraitImgUpload" :disabled="!isCRM && form.idCardPortraitImages!=null"></u-upload>
        </u-form-item>
        <u-form-item required label="床位全包" prop="isAllBed">
          <u-radio-group v-model="form.isAllBed" @change="radioGroupChange" >
            <u-radio
              v-for="(item, index) in checkboxList" :key="item.name"
              :name="item.value"
              :disabled="item.disabled"
            >
              {{item.name}}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <view style="padding:20rpx 0rpx;display: flex;justify-content: space-between;" v-if="form.isAllBed == '是' || form.isAllBed == 1">
          <text>
            同住人员
          </text>
          <u-button style="margin: 0;"  type="success" @click="addtzry" size="mini">添加同住人员</u-button>
        </view>
        <u-table v-if="form.isAllBed == '是' || form.isAllBed == 1">
          <u-tr>
            <u-th>姓名</u-th>
            <u-th>性别</u-th>
            <u-th>电话</u-th>
            <u-th>操作</u-th>
          </u-tr>
          <u-tr v-for="(item,index) in form.ridersLodgingCohabitantList" :key="item.name">
            <u-td>{{ item.name }}</u-td>
            <u-td>{{ item.sex }}</u-td>
            <u-td>{{ item.phoneNumber }}</u-td>
            <u-td><u-icon name="trash-fill" size="38" style="margin: 0 auto;"  color="#fa3534" @click="deleteTxry(item,index)"></u-icon></u-td>
          </u-tr>
        </u-table>
      </u-form>
      <u-button style="position: fixed;bottom: 0;left: 0;width: 100%;z-index:60" type="primary" @click="submitFunc">提交</u-button>
    </view>
    <u-modal v-model="idCardPopup" :title-style="{color: 'red'}" title="身份验证" :show-cancel-button="true" @confirm="confirmFunc" @cancel="cancelFunc" :async-close="true">
      <view class="slot-content">
        <u-form style="padding:0 40rpx;margin: 30rpx 0" :model="idCardForm" ref="uForm2" label-width="120">
          <u-form-item label="身份证"><u-input v-model="idCardForm.idCardNo" /></u-form-item>
        </u-form>
      </view>
    </u-modal>
    <u-modal ref="uModal" v-model="tzryPopup" :title-style="{color: 'red'}" title="添加同住人员" :show-cancel-button="true" @confirm="confirmtzry" @cancel="cancelFunc" :async-close="true">
      <view class="slot-content">
        <u-form style="padding:0 40rpx;margin: 30rpx 0"  :model="tzryForm"   ref="uForm3" label-width="140">
          <u-form-item required label="姓名" prop="name"><u-input v-model="tzryForm.name" /></u-form-item>
          <u-form-item required label="性别" prop="sex">
            <u-radio-group v-model="tzryForm.sex">
              <u-radio
                v-for="(item, index) in sexList" :key="item.name"
                :name="item.value"
                :disabled="item.disabled"
              >
                {{item.name}}
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item required label="身份证号" prop="idCardNo"><u-input v-model="tzryForm.idCardNo" /></u-form-item>
          <u-form-item required label="联系电话" prop="phoneNumber"><u-input v-model="tzryForm.phoneNumber" /></u-form-item>
          <u-form-item required label="关系" prop="relationship"><u-input v-model="tzryForm.relationship2"  @click="showContactRelationSel = true"  type="select"/></u-form-item>
        </u-form>
      </view>
    </u-modal>
    <u-select v-model="showContactRelationSel" :list="contactRelationList" mode="single-column"
              @confirm="selectedContactRelation"></u-select>
    <u-calendar v-model="calendarShow" :mode="mode" :default-start-date="minDate" :max-date="'2099-1-1'" @change="changeCalendar"></u-calendar>
    <u-calendar v-model="calendarShow2" :mode="mode" :default-start-date="minDate2" :max-date="'2099-1-1'" @change="changeCalendar2"></u-calendar>
    <u-modal v-model="show" confirm-text="退出"
             title="提示"  @confirm="confirm"
    >
      <view class="u-update-content">
        <rich-text style="text-align: center;padding: 30rpx" :nodes="content"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {compressImg} from '@/utils/compressor/compress.js'
import {uploadImg} from '@/utils/upload.js'
import {isEmpty} from "../../../utils";
import * as consts from "@/utils/constant.js";
import {getQueryString} from "@/utils/index.js";

export default {
  data() {
    return {
      show:false,
      content:'床位已入住或当前角色无法办理入住',
      rules:{
        roomNo: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        bedNo: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        name: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        sex: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        idCardNo: [{
          required: true,
          message: '请输入身份证',
          trigger: ['blur','change'],
        },
          {
            // 自定义验证函数
            validator: (rule, value, callback) => {
              // 返回true表示校验通过，返回false表示不通过
              return this.$u.test.idCard(value)
            },
            message: '身份证不正确',
            // 触发器可以同时用blur和change
            trigger: ['blur','change'],
          }],
        phoneNumber: [{
          required: true,
          message: '请输入手机号',
          trigger: ['change','blur'],
        },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change','blur'],
          }],
        paymentMethod:[{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        deposit: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        rent: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        isAllBed: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        checkOutTime: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        checkInTime: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        // avatarImages: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        // idCardBadgeImages: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        // idCardPortraitImages: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
        relationship: [{required: true,message: '请输入/选择相关内容',trigger: ['change','blur'],}],
      },
      form: {},
      paymentMethodOption:[
        {
          name: '微信支付 ',
          value:'1',
          checked: false,
          disabled: false
        },
        {
          name: '工资扣款',
          value:'2',
          checked: false,
          disabled: false
        }
      ],
      sexList: [
        {
          name: '男',
          value:'0',
          checked: false,
          disabled: false
        },
        {
          name: '女',
          value:'1',
          checked: false,
          disabled: false
        }
      ],
      checkboxList: [
        {
          name: '是',
          value:'1',
          checked: false,
          disabled: false
        },
        {
          name: '否',
          value:'0',
          checked: false,
          disabled: false
        },
      ],
      radio: '',
      switchVal: false,
      showavatarImages:false,
      showIdCardBadgeImages:false,
      showIdCardPortraitImgPreview:false,
      idCardPopup:false,
      idCardForm:{},
      isCRM:false,
      calendarShow:false,
      calendarShow2:false,
      mode: 'date',
      //同行人员相关
      // 关系列表
      contactRelationList: [],
      showContactRelationSel:false,
      tzryPopup:false,
      tzryForm:{},
      riderRoster:uni.getStorageSync("riderRoster"),
      bd09Coords:''
    };
  },
  async onShow(options) {
    function getQueryParamFromHash(name) {
      // 获取 URL 哈希部分
      const hash = window.location.hash;

      // 确保哈希部分存在
      if (hash) {
        // 提取哈希后的查询字符串部分
        const queryString = hash.split('?')[1];

        // 如果查询字符串存在
        if (queryString) {
          // 使用 URLSearchParams 解析查询字符串
          const params = new URLSearchParams(queryString);
          return params.get(name);
        }
      }
      return null;
    }

    if (!isEmpty(uni.getStorageSync("idCardPopup"))) {
      this.idCardForm.idCardNo = uni.getStorageSync("idCardPopup")
      this.confirmFunc()
    }

    uni.setStorageSync("loadSignPDF",'')
    let openId = uni.getStorageSync('openId')
    this.form.ridersLodgingCohabitantList = []
    this.contactRelationList = []
    await this.$api.dormitory.getLodgingByOpenIdAndBedId(openId,'','1')
    uni.setStorageSync("bedId",getQueryParamFromHash("bedId"))
    let {data} = await this.$api.dormitory.getBedInfoById(getQueryParamFromHash("bedId"))
    this.form.bedNo = data.bedNumber
    this.form.bedId = getQueryParamFromHash("bedId")
    this.form.deposit = data.bedDeposit
    this.form.rent = data.bedRent
    this.form.dormitoryId = data.dormitoryId
    this.form.roomNo = data.roomId
    this.form.buildingNo = data.building
    this.form.lodgingCoordinate = data.coordinate
    // this.form.buildingNo = data.buildingNo
    this.form.status = 0
    this.form.openid = openId
    this.form.status = 0
    let isAdmin = uni.getStorageSync('isAdmin')
    if (data.bedStatus != 1 || isAdmin == true || isAdmin == 'true') {
      this.show = true
    }

    let res = await this.$api.dormitory.getdictType('rid_emergency_contact');
    let data2 = res.data
    if (data2) {
      data2.forEach(item => {
        this.contactRelationList.push({ value: item.dictValue, label: item.dictLabel })
      })
    }
  },
  async onLoad(query) {
    console.log(111,)
    // console.log('wgs84ToBd09 坐标：', this.wgs84ToBd09(39.069139386862474, 117.10274539652485));
    uni.getLocation({
      type: 'wgs84',
      isHighAccuracy:true,
      accuracy: 'best',
      success: ((res)=> {
        console.log('wgs84=res',res)
        let latitude = res.latitude;
        let longitude = res.longitude;
        console.log('WGS84 坐标：', latitude, longitude);
        // console.log('wgs84ToBd09 坐标：', wgs84ToGcj02ToBd09Public(latitude, longitude));
        this.wgs84ToBd09(latitude, longitude)
      })
    })

  },
  computed:{
    minDate2(){
      const nextDay = new Date();
      // 获取当前日期的年、月、日
      let year1 = nextDay.getFullYear();
      let month1 = nextDay.getMonth();
      let day1 = nextDay.getDate();
      // 计算下一天的日期
      let now = new Date(year1, month1, day1);
      // 创建一个 Date 对象，它将自动获取当前的日期和时间
      // const now = new Date();
      // 获取年、月、日
      const year = now.getFullYear();
      let month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从 0 开始计数的，使用padStart方法补零
      let day = now.getDate().toString().padStart(2, '0'); // 获取日期，使用padStart方法补零
      return year+'-'+month+'-'+day
    },
    minDate(){
      const nextDay = new Date();
      // 获取当前日期的年、月、日
      let year1 = nextDay.getFullYear();
      let month1 = nextDay.getMonth();
      let day1 = nextDay.getDate();
     // 计算下一天的日期
      let now = new Date(year1, month1, day1);
      // 创建一个 Date 对象，它将自动获取当前的日期和时间
      // const now = new Date();
      // 获取年、月、日
      const year = now.getFullYear();
      let month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从 0 开始计数的，使用padStart方法补零
      let day = now.getDate().toString().padStart(2, '0'); // 获取日期，使用padStart方法补零
      return year+'-'+month+'-'+day
    }
  },

  mounted() {
    this.$refs.uForm.setRules(this.rules);
    this.$forceUpdate();
  },
  methods:{
    wgs84ToBd09(lat, lng) {
      let apiKey = 'aoU7EqT6qn2JYQo1BR72IN12oazPpx84'
      const url = `/baidu/geoconv/v1/?coords=${lng},${lat}&from=1&to=5&ak=${apiKey}`;
      uni.request({
        url: url,
        method: 'GET',
        success: (res) => {
          console.log(res)
          let parm = {
            longitude:res.data.result[0].x,
            latitude:res.data.result[0].y
          }
          console.log('wgs84ToBd09 坐标：',parm.longitude+','+parm.latitude)
          this.bd09Coords = parm
        },
        fail: (err) => {
          console.error('请求失败', err);
        }
      });
    },
    jointUrl(url) {
      console.log('(url=====>>>>>',(window.location.href.includes('/xsdcrm-wechat-ui/')?'': '/profile/') + url)
      return (window.location.href.includes('/xsdcrm-wechat-ui/')?consts.API_BASE_URL+'/xsdcrm-static/upload/': '/profile/') + url
    },
    confirm() {
      uni.reLaunch({
        url: `/pages/HomePage/webIndex`
      })
    },
    selectedContactRelation(v){
        this.tzryForm.relationship2 = v[0].label
        this.tzryForm.relationship = v[0].value
    },
    //添加同住人员
    addtzry() {
      this.tzryPopup = true
      this.tzryForm = {}
      this.$refs.uForm3.setRules(this.rules);
    },
    deleteTxry(item,index) {
      delete this.form.ridersLodgingCohabitantList[index]
      this.form.ridersLodgingCohabitantList = this.form.ridersLodgingCohabitantList.filter(v =>{v});
      this.$forceUpdate();
    },
    confirmtzry() {
      this.$refs.uForm3.validate(async (valid) => {
        if (valid) {
          this.tzryPopup = false;
          this.form.ridersLodgingCohabitantList.push(this.tzryForm)
        } else {
          console.log('验证失败');
          this.$refs.uModal.clearLoading();
        }
      });
    },
    async submitFunc() {
      console.log('this.form.,this.form.',this.form)
      if ((this.isCRM==true && this.form.avatarImages == null ) || (this.isCRM==false && this.form.idCardBadgeImages==null) || (this.isCRM==false && this.form.idCardPortraitImages==null)) {
        uni.showToast({
          title: "请上传必要照片",
          icon: "none",
        });
        return
      }
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          uni.showLoading({
            title: '申请中'
          });
          // uni.getLocation({
          //   type: 'wgs84',
          //   success: (async(res)=> {
          //     let latitude = res.latitude;
          //     let longitude = res.longitude;
          //     console.log('WGS84 坐标：', latitude, longitude);
          //     // 转换为百度坐标
          //     console.log('BD-09 坐标：', bd09Coords.latitude, bd09Coords.longitude);
              let openId = uni.getStorageSync('openId')
              let quest = {
                bedId:this.form.bedId,
                name:this.riderRoster.idCardName,
                riderId:this.riderRoster.riderId,
                deptId:this.riderRoster.deptId,
                deptName:this.riderRoster.deptName,
                idCardNo:this.riderRoster.idCardNo,
                phoneNumber:this.riderRoster.phoneNumber,
                openid:openId,
                avatarImages:this.form.avatarImages,
                riderCoordinate:this.bd09Coords.longitude+','+this.bd09Coords.latitude,
                lodgingCoordinate:this.form.lodgingCoordinate,
              }
              let {code} = await this.$api.dormitory.calculateDistance(quest)
              if (code == 200) {
                uni.setStorageSync("checkInForm",this.form);
                uni.navigateTo({
                  url: `/pages/HomePage/pdf/webIndex?id=`
                })
                uni.hideLoading();
              } else {
                uni.hideLoading();
                uni.showToast({
                  title:'您当前所在位置距离宿舍较远，请在前往宿舍所在地办理',
                  icon:'none'
                })
              }

          //   }),
          //   fail:(e=>{
          //     console.log(e)
          //   })
          // });


        } else {
          console.log('验证失败');
        }
      });
    },
    dateInterval(Time){
      // 获取今天的日期
      const today = new Date();
      const specifiedDateStr = Time;
      const specifiedDate = new Date(specifiedDateStr);
      const timeDiff = specifiedDate.getTime() - today.getTime();
      const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
      return daysDiff
    },
    nowTime(){
      const now = new Date();
      // 获取年、月、日
      const year = now.getFullYear();
      let month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从 0 开始计数的，使用padStart方法补零
      let day = now.getDate().toString().padStart(2, '0'); // 获取日期，使用padStart方法补零
      return year+'-'+month+'-'+day
    },
    changeCalendar(e) {
      const nowTime = this.nowTime()
      if (e.result != nowTime) {
        this.form.checkOutTime = e.result
        this.form.stayday = this.dateInterval(e.result)
      } else {
        this.form.checkOutTime =  '';
        uni.showToast({
          title: "离宿日期不可选择当天",
          icon: "none",
        });
      }
    },
    changeCalendar2(e) {
        this.form.checkInTime = e.result
        this.$forceUpdate();
    },
    checkOutTimeFunc() {
      console.log(11)
      this.calendarShow = true
    },
    checkOutTimeFunc2() {
      this.calendarShow2 = true
    },
    async confirmFunc() {
      let { code, msg ,data } = await this.$api.dormitory.getRidInfoByIdCard(this.idCardForm.idCardNo).catch(()=>{});
      if (data){
        // function getGenderByIdNumber(idNumber) {
        //   function convertIfNumber(value) {
        //     if (typeof value === 'number' && Number.isFinite(value)) {
        //       return value.toString();
        //     }
        //     return value;
        //   }
        //   idNumber = convertIfNumber(idNumber)
        //   if (idNumber) {
        //     let genderCode; // 性别代码
        //     if (idNumber.length == 18) { // 二代身份证号码长度为18位（第17位为性别代码）
        //       genderCode = idNumber.charAt(16);
        //     } else if (idNumber.length == 15) { // 一代身份证号码长度为15位（第15位为性别代码）
        //       genderCode = idNumber.charAt(14);
        //     }
        //     if (genderCode && !isNaN(genderCode)) {
        //       // 两代身份证号码的性别代码都为男奇女偶
        //       if (parseInt(genderCode) % 2 == 0) {
        //         return '女';
        //       }
        //       return '男';
        //     }
        //   }
        // }
        // function gender(idNumber) {
        //   if (!idNumber || idNumber.length !== 18) {
        //     return '身份证号码不正确';
        //   }
        //   const sexCode = Number(idNumber.substring(16, 17));
        //   if (sexCode % 2 === 0) {
        //     return '女';
        //   } else {
        //     return '男';
        //   }
        // }
        function gender(idNumber) {
          let sex = '';
          if (!idNumber || idNumber.length !== 18) {
            return '身份证号码不正确';
          }
          console.log("idNumber===",idNumber);
          sex = idNumber.substr(16,1);
          console.log("sex===",sex% 2);
          if(sex% 2 == 1){
            return '0'
          } else {
            return '1'
          }
        }

         this.form.sex = gender(data.idCardNo)
         this.isCRM = true
         let NewForm = Object.assign({},data,JSON.parse(JSON.stringify(this.form)));
         this.form = JSON.parse(JSON.stringify(NewForm))
         this.$forceUpdate();
      }
      this.idCardPopup = false
    },
    cancelFunc() {

    },
    radioGroupChange(){

    },
    // 删除身份证人像面
    onIdCardBadgeImgDelete() {
      this.form.idCardBadgeImages = null
      this.showIdCardBadgeImages = false
    },
    // 删除身份证国徽面
    onIdCardPortraitImgDelete() {
      this.form.idCardPortraitImages = null
      this.showIdCardPortraitImgPreview = false
    },
    //删除人脸照片
    onHandIdCardImgDelete() {
      this.form.avatarImages = null
      this.showavatarImages = false
    },
    // 上传图片
    async uploadPic(file, name) {
      try {
        const res = await uploadImg(file,'/xsdcrm-wechat-api/wxseparateAgreement/signUpload',false);
        this.$set(this.form, name, res.fileName);
        console.log(this.form[name])
        this.$forceUpdate();
      } catch (e) {
      }
    },
    // 人脸照片选择后回调
    onHandIdCardChooseCallback(lists) {
      // 压缩图片
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "avatarImages")
          this.showavatarImages = true
        }
      })
    },
    // 身份证人像面选择后回调
    onIdCardBadgeImgCallback(lists){
      // 压缩图片
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "idCardBadgeImages")
          this.showIdCardBadgeImages = true
        }
      })
    },
    // 身份证国徽面选择后回调
    onIdCardPortraitImgCallback(lists) {
      // 压缩图片
      compressImg({
        file: lists[0].file, success: (result) => {
          this.uploadPic(result, "idCardPortraitImages")
          this.showIdCardPortraitImgPreview = true
        }
      })
    },
  }
};
</script>
<style scoped>
*{
  box-sizing: border-box;
}
  .view-class{
    width: 100%;
    height: 100vh;
  }
  .view-box{
    padding:0 30rpx;
    padding-bottom: 120rpx;
  }
  .container {
    height: 200vh;
    margin-top: 150rpx;
  }

  .sticky {
    width: 750rpx;
    height: 120rpx;
    background-color: #2979ff;
    color: #fff;
    padding: 24rpx;
  }
  .u-form-item{
    padding-right: 30rpx;
  }
</style>
